// top列表  二级菜单
$(function () {
    function Li_menu() {
        this.li_last = $("#li-last");
        this.li_menu = $(".li-menu");
        this.bindEvent();
    }
    Li_menu.prototype.bindEvent = function () {
        var _this = this;
        this.li_last.mouseover(function () {
            $(_this.li_menu).css({
                height: 70
            })
        });
        this.li_menu.mouseover(function () {
            $(_this.li_menu).css({
                height: 70
            })
        });
        this.li_menu.mouseout(function () {
            $(_this.li_menu).css({
                height: 0
            })
        });
        this.li_menu.mouseout(function () {
            $(_this.li_menu).css({
                height: 0
            })
        });
    }
    new Li_menu();
})


// 遮罩层协议

$(function () {
    function Mask() {
        this.mask_btn2 = $(".mask-btn2");
        this.top_mask = $(".top-mask");
        this.top_register = $("#top-register");
        this.mask = $(".mask");
        this.span_close = $(".span-close");
        this.mask_btn1 = $(".mask-btn1");
        this.top_login = $("#top-login");
        this.bindEvent();
    }

    Mask.prototype.bindEvent = function () {
        var _this = this;
        this.top_register.click(function () {
            $(_this.top_mask).css({
                opacity: 1,
                top: 200,
                zIndex: 101
            });
            $(_this.mask).css({
                display: "block"
            });
            _this.mask_btn1.click(function () {
                location.href = "register.html";
            });
        });
        this.top_login.click(function () {
            $(_this.top_mask).css({
                opacity: 1,
                top: 200,
                zIndex: 101
            })
            $(_this.mask).css({
                display: "block"
            });
            _this.mask_btn1.click(function () {
                location.href = "login.html";
            })
        });


        this.mask_btn2.click(function () {
            location.href = "shopcart.html";
        })
        this.span_close.click(function () {
            location.href = "shopcart.html";
        })
    }
    new Mask();
})


// header搜索框
$(function () {
    function Header_search() {
        this.input = $("#header-input");
        this.bindEvent();
    }

    Header_search.prototype.bindEvent = function () {
        var _this = this;
        this.input.focus(function () {
            $(_this.input).css({
                borderColor: "#" + "845f3f"
            })
        });
        this.input.blur(function () {
            $(_this.input).css({
                borderColor: "#" + "ddd"
            })
        });
    }
    new Header_search();
})


// 购物车渲染
var box = $("#cart-goods-list");
var id = location.href.split("?")[1].split("=")[1];
$.ajax("./libs/goods-list.json")
    .then(function (res) {
        var item = res.data[id];
        var html = `<tr>
        <td>
            <input type="checkbox" name="good-id" value="1">
        </td>
        <td class="goods">
            <div class="goods-image">
                <img src="${item.image}">
            </div>
            <div class="goods-information">
                <h3>${item.title}</h3>
                <ul>
                    <li>${item.titlespan}</li>
                </ul>
            </div>
        </td>
        <td>
            <span class="price">￥<em class="price-em">${item.priceb}</em></span>
        </td>
        <td>
            <div class="combo">
                <input type="button" name="minus" value="-" class="combo-minus">
                <input type="text" name="count" value="1" class="combo-value">
                <input type="button" name="plus" value="+" class="combo-plus">
            </div>
        </td>
        <td>
            <strong class="amount">￥<em class="amount-em">${item.priceb}</em></strong>
        </td>
    </tr>`;
        box.html(html);
        $(function () {
            // 立即付款
            var paycash = $("#settlement");
            var pay = $("#pay");
            var mask = $(".mask");
            var shut = $("#shut");
            paycash.click(function(){
                mask.css({
                    display : "block"
                });
                pay.css({
                    display : "block"
                });
            });
            shut.click(function(){
                mask.css({
                    display : "none"
                });
                pay.css({
                    display : "none"
                });
            });

            $("#footer").hover(function () {
                $("#footer").css({ "border": "#e00" })
            })
        
            var inputs = document.getElementsByName("good-id");
            var all = document.getElementsByName("all")[0];
        
            all.onclick = function () {
                for (var i = 0; i < inputs.length; i++) {
                    inputs[i].checked = this.checked;
                }
                sumprice();
            }
        
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].onclick = function () {
                    var count = 0;
                    for (var j = 0; j < inputs.length; j++) {
                        if (inputs[j].checked == true) {
                            count++
                        }
                    }
                    if (count < inputs.length) {
                        all.checked = false;
                    } else {
                        all.checked = true;
                    }
                    sumprice();
                }
            }
        
            //减少
            var minus = document.getElementsByName("minus");
            for (var i = 0; i < minus.length; i++) {
                minus[i].onclick = function () {
                    var counts = this.nextElementSibling;
                    var count = parseInt(counts.value);
                    if (count > 1) {
                        counts.value = --count;
                    }
                    sumprice();
                }
            }
            //增加
            var plus = document.getElementsByName("plus");
            for (var i = 0; i < plus.length; i++) {
                plus[i].onclick = function () {
                    var counts = this.previousElementSibling;
                    var count = parseInt(counts.value);
                    counts.value = ++count;
                    sumprice();
                }
            }
        
            //手动输入
            var counts = document.getElementsByName("count");
            for (var i = 0; i < counts.length; i++) {
                counts[i].onblur = function () {
                    var count = parseInt(this.value);
                    if (isNaN(count) || count < 1) {
                        count = 1;
                    }
                    this.value = count;
                    sumprice();
                }
            }
        
        
            //计算
            function sumprice() {
                var tbody = document.getElementById("cart-goods-list");
                var tbodyTr = tbody.getElementsByTagName("tr");
                var sumprice = 0;
                for (var i = 0; i < tbodyTr.length; i++) {
                    //获取单价
                    var priceEm = tbodyTr[i].getElementsByClassName("price-em")[0];
                    var price = parseFloat(priceEm.innerText);
        
                    //获取数量
                    var counts = tbodyTr[i].getElementsByClassName("combo-value")[0];
                    var count = parseInt(counts.value);
                    //乘积
                    var chengji = price * count;
                    //把乘积弄到金额里面
                    var amountEm = tbodyTr[i].getElementsByClassName("amount-em")[0];
                    amountEm.innerText = chengji.toFixed(2);
        
                    //获取单选框
                    var liD = tbodyTr[i].getElementsByTagName("input")[0];
                    if (liD.checked) {
                        sumprice += chengji;
                    }
                }
                var zong = document.getElementById("total-amount-em");
                zong.innerText = sumprice.toFixed(2);
            }
        
            //删除
            document.getElementById("cart-delete").onclick = function () {
                var tbody = document.getElementById("cart-goods-list");
                var del = [];
                for (var i = 0; i < inputs.length; i++) {
                    if (inputs[i].checked) {
                        del.push(inputs[i].parentElement.parentElement);
                    }
                }
                for (var i = 0; i < del.length; i++) {
                    tbody.removeChild(del[i]);
                }
                all.checked = false;
                sumprice();
            }
        
            document.getElementById("total-amount").onmouseover = function () {
                document.getElementById("total-amount").style.cursor = "pointer";
            }
        
            document.getElementById("total-amount").onclick = function () {
                var tbody = document.getElementById("cart-goods-list");
                var tr = document.createElement("tr");
                tbody.appendChild(tr);
            }
        })
    });




